<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    setup() {},
});
</script>

<template>
    <div class="footer">
        <div class="main2 d">
            <div class="logo-wrap">
                <div class="logo-top">
                    <img src="@/assets/logo2.png" alt="" srcset="" />
                    <div class="f16 text">
                        {{ $t("layout.text89") }}
                    </div>
                </div>
            </div>
            <div class="wrap">
                <div class="row">
                    <div class="name">{{ $t("layout.email") }}</div>
                    <ul>
                        <li>tronbank6@gmail.com</li>
                    </ul>
                </div>
                <div class="row">
                    <div class="name">{{ $t("layout.Products") }}</div>
                    <ul>
                        <li>
                            <router-link to="/index">
                                {{ $t("layout.Energyleasing") }}
                            </router-link>
                        </li>
                        <li>
                            <router-link to="/stake">{{
                                $t("layout.Pledgedfinancialmanagement")
                            }}</router-link>
                        </li>
                        <li>
                            <router-link to="/node">{{
                                $t("menu.node")
                            }}</router-link>
                        </li>
                        <li>
                            <router-link to="/swap">{{
                                $t("menu.Trade")
                            }}</router-link>
                        </li>
                    </ul>
                </div>
                <div class="row">
                    <div class="name">{{ $t("menu.AboutUs") }}</div>
                    <ul>
                        <li>
                            <router-link to="">
                                {{ $t("menu.EmploymentOpportunities") }}
                            </router-link>
                        </li>
                        <li>
                            <router-link to="">{{
                                $t("menu.PrivacyPolicy")
                            }}</router-link>
                        </li>
                        <li>
                            <router-link to="">{{
                                $t("menu.TermsOfService")
                            }}</router-link>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="external">
                <ul>
                    <li>
                        <a
                            href="https://x.com/TronBankPro"
                            target="_blank"
                            rel="noopener noreferrer"
                        >
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="28"
                                height="28"
                                viewBox="0 0 28 28"
                                fill="none"
                            >
                                <path
                                    d="M19.6096 5.58057H22.5673L16.1055 12.966L23.7073 23.0159H17.7552L13.0932 16.9207L7.75888 23.0159H4.79935L11.7109 15.1164L4.41846 5.58057H10.5217L14.7357 11.1518L19.6096 5.58057ZM18.5715 21.2456H20.2104L9.63117 7.25795H7.87242L18.5715 21.2456Z"
                                    fill="black"
                                />
                            </svg>
                            Twitter
                        </a>
                    </li>

                    <li>
                        <a
                            href="https://t.me/TronBank_Pro"
                            target="_blank"
                            rel="noopener noreferrer"
                        >
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="28"
                                height="28"
                                viewBox="0 0 28 28"
                                fill="none"
                            >
                                <path
                                    d="M25.1362 5.92079L21.7559 21.9593C21.5009 23.0913 20.8358 23.373 19.8908 22.8397L14.7403 19.0213L12.2551 21.426C11.98 21.7027 11.75 21.9342 11.22 21.9342L11.59 16.6567L21.1359 7.97843C21.5509 7.60615 21.0459 7.39988 20.4908 7.77216L8.68976 15.2481L3.6093 13.6483C2.50421 13.3011 2.4842 12.5364 3.83932 12.0032L23.7111 4.30084C24.6312 3.95371 25.4362 4.50711 25.1362 5.92079Z"
                                    fill="black"
                                />
                            </svg>
                            {{ $t("layout.text86") }}
                        </a>
                    </li>
                    <li>
                        <a
                            href="https://t.me/tronbankpro"
                            target="_blank"
                            rel="noopener noreferrer"
                        >
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="28"
                                height="28"
                                viewBox="0 0 28 28"
                                fill="none"
                            >
                                <path
                                    d="M25.1362 5.92079L21.7559 21.9593C21.5009 23.0913 20.8358 23.373 19.8908 22.8397L14.7403 19.0213L12.2551 21.426C11.98 21.7027 11.75 21.9342 11.22 21.9342L11.59 16.6567L21.1359 7.97843C21.5509 7.60615 21.0459 7.39988 20.4908 7.77216L8.68976 15.2481L3.6093 13.6483C2.50421 13.3011 2.4842 12.5364 3.83932 12.0032L23.7111 4.30084C24.6312 3.95371 25.4362 4.50711 25.1362 5.92079Z"
                                    fill="black"
                                />
                            </svg>
                            {{ $t("layout.text87") }}
                        </a>
                    </li>
                    <li>
                        <a
                            href="https://t.me/TronBankPro1"
                            target="_blank"
                            rel="noopener noreferrer"
                        >
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="28"
                                height="28"
                                viewBox="0 0 28 28"
                                fill="none"
                            >
                                <path
                                    d="M25.1362 5.92079L21.7559 21.9593C21.5009 23.0913 20.8358 23.373 19.8908 22.8397L14.7403 19.0213L12.2551 21.426C11.98 21.7027 11.75 21.9342 11.22 21.9342L11.59 16.6567L21.1359 7.97843C21.5509 7.60615 21.0459 7.39988 20.4908 7.77216L8.68976 15.2481L3.6093 13.6483C2.50421 13.3011 2.4842 12.5364 3.83932 12.0032L23.7111 4.30084C24.6312 3.95371 25.4362 4.50711 25.1362 5.92079Z"
                                    fill="black"
                                />
                            </svg>
                            {{ $t("layout.text85") }}
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="COPYRIGHT">TronBank.Pro COPYRIGHT 2025</div>
    </div>
</template>

<style lang="less" scoped>
.footer {
    padding: 160px 15px 0 15px;
    background: #fff;
    .d {
        position: relative;
        justify-content: space-between;
    }
    .logo-wrap {
        // display: flex;
        // flex-wrap: wrap;
        .logo-top {
            img {
                width: 198px;
                height: 36px;
                flex-shrink: 0;
            }
            .text {
                margin-top: 14px;
            }
        }
    }
    .wrap {
        display: flex;
        .row {
            margin-left: 100px;
            &:first-child {
                margin-left: 0;
            }
            .name {
                color: #949494;
                font-size: 20px;
                font-weight: 400;
            }
            ul {
                margin-top: 15px;
                li {
                    padding: 10px 0;
                    color: #000;
                    font-size: 16px;
                    font-weight: 400;
                    a {
                        &:hover {
                            color: #eb0029;
                        }
                    }
                }
            }
        }
    }
    .external {
        position: absolute;
        bottom: 0;
        ul {
            display: flex;
            align-items: center;
            li {
                margin-right: 30px;
                &:last-child {
                    margin: 0;
                }
                a {
                    display: flex;
                    align-items: center;
                    white-space: nowrap;
                    font-size: 16px;
                    &:hover {
                        color: #eb0029;
                    }
                    svg {
                        margin-right: 8px;
                        width: 28px;
                        height: 28px;
                        flex-shrink: 0;
                    }
                }
            }
        }
    }
    .COPYRIGHT {
        margin-top: 40px;
        padding: 20px 0;
        color: #949494;
        font-size: 14px;
        font-weight: 400;
        text-align: center;
        border-top: 1px solid rgba(217, 217, 217, 1);
    }
    @media (max-width: 1200px) {
        & {
            padding: 100px 15px 0 15px;
            .main2 {
                display: block;
                text-align: center;
                .logo-wrap {
                    padding: 0 20px;
                }
                .wrap {
                    display: block;
                    .row {
                        margin: 0;
                        margin-top: 60px;
                    }
                }
                .external {
                    margin-top: 60px;
                    position: static;
                    ul {
                        display: block;
                        li {
                            margin: 0;
                            margin-bottom: 24px;
                            a {
                                justify-content: center;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
